<template>
  <div class="page-container">
    <div class="page-content">
      <!--搜索-->
      <div class="panel-container">
        <searchuinew ref="searchuinew" :searchFormArr="searchFormArr" @searchParma="searchParma" :isAccording="isAccording" @change="handleChange"></searchuinew>
      </div>
      <div class="panel-container no-margin">
        <div>
          <el-table :data="dataList" size="mini" :header-cell-style="{ background: '#F5F5F5', color: '#000000' }" ref="table" style="width: 100%" v-loading="dataListLoading">
            <el-table-column type="index" width="50"> </el-table-column>
            <el-table-column align="center" header-align="center" label="信息标题" prop="title" width="250"></el-table-column>
            <el-table-column align="center" header-align="center" label="分类" prop="cate_id_show" width="150"></el-table-column>
            <el-table-column align="center" header-align="center" label="信息类型" prop="is_fast_show" width="100"></el-table-column>
            <el-table-column align="center" header-align="center" label="发布人" prop="user_name" width="150"></el-table-column>
            <el-table-column align="center" header-align="center" label="发布时间" prop="pub_date" width="150"></el-table-column>
            <el-table-column align="center" header-align="center" label="审核人" prop="power_name" width="150"></el-table-column>
            <el-table-column align="center" header-align="center" label="审核时间" prop="power_time" width="150"></el-table-column>
            <el-table-column align="center" header-align="center" label="状态" prop="power_sts_show" width="200" show-overflow-tooltip></el-table-column>
            <el-table-column align="center" fixed="right" header-align="center" label="操作" width="200">
              <template slot-scope="scope">
                <el-button size="mini" v-if="parseInt(scope.row.power_sts) === 1" type="text" class="grey" @click="handleExamine(scope)">审核</el-button>
                <el-button size="mini" type="text" class="grey" @click="handleEdit(scope)">编辑</el-button>
                <el-button size="mini" type="text" class="grey" @click="handleDelete(scope)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <el-pagination
          small
          background
          :current-page="pageNumber"
          :page-size="pageSize"
          :page-sizes="[10, 20, 50, 100]"
          :total="totalPage"
          @current-change="currentChangeHandle"
          @size-change="sizeChangeHandle"
          layout="total, sizes, prev, pager, next, jumper"
          style="margin-top: 20px; text-align: right"
        ></el-pagination>
      </div>
    </div>

    <!--  审核弹窗-->
    <el-drawer :title="editMode === 'edit' ? '信息编辑' : '信息审核'" :visible.sync="showExamine" :destroy-on-close="true" size="40%">
      <examine :id="currentId" :mode="editMode" :categoryList="categoryList" :sourceList="sourceList" @close="showExamine = false" @refresh="handleRefresh" />
    </el-drawer>
    <!--  极速发布--审核弹窗-->
    <el-drawer :title="editMode === 'edit' ? '信息编辑' : '信息审核'" :visible.sync="showQuickExamine" :destroy-on-close="true" size="40%">
      <quickExamine :id="currentId" :mode="editMode" :labels="labels" @close="showQuickExamine = false" @refresh="handleRefresh" />
    </el-drawer>
  </div>
</template>

<script>
import { apiGetPostList, apiGetSelectList, apiPostDelete } from '@/api/wxapplet'
import examine from './components/examine.vue'
import quickExamine from './components/quickExamine.vue'

export default {
  name: 'index',
  components: { examine, quickExamine },
  data() {
    return {
      searchFormArr: [
        {
          fieldName: '标题：',
          type: 'input',
          field: 'title',
          placeholder: '请输入标题',
        },
        {
          fieldName: '一级分类：',
          type: 'select',
          field: 'first_cate',
          option: [],
          placeholder: '请选择分类',
        },
        {
          fieldName: '二级分类：',
          type: 'select',
          field: 'cate_id',
          option: [],
          placeholder: '请选择分类',
        },
        {
          fieldName: '信息类型：',
          type: 'select',
          field: 'is_fast',
          option: [
            { id: '0', text: '处理发布' },
            { id: '1', text: '极速发布' },
          ],
          placeholder: '请选择信息类型',
        },
        {
          fieldName: '来源：',
          type: 'select',
          field: 'source_id',
          option: [],
          placeholder: '请选择来源',
        },
        {
          fieldName: '发布人：',
          type: 'input',
          field: 'pub_man',
          placeholder: '请输入发布人',
        },
        {
          fieldName: '时间选择',
          type: 'timePicker',
          field: 'time',
          placeholder: '请选择时间',
          timeType: 'daterange',
          format: 'yyyy-MM-dd',
        },
        {
          fieldName: '审核状态：',
          type: 'select',
          field: 'power_sts',
          option: [],
          placeholder: '请选择审核状态',
        },
        {
          fieldName: '审核人：',
          type: 'input',
          field: 'power_name',
          placeholder: '请输入审核人',
        },
      ],
      searchParams: {
        title: '',
        first_cate: '',
        cate_id: '',
        is_fast: '',
        source_id: '',
        pub_man: '',
        start_time: '',
        end_time: '',
        power_sts: '',
        power_name: '',
      },
      stsList: [
        { id: 1, text: '审核中' },
        { id: 4, text: '审核通过' },
        { id: 3, text: '审核未通过' },
      ],
      isAccording: true,
      dataList: [],
      pageNumber: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      categoryList: [],
      labels: [],
      sourceList: [],
      showExamine: false,
      showQuickExamine: false,
      currentId: '',
      editMode: 'examine',
    }
  },
  mounted() {
    this.getSelectList()
  },
  methods: {
    // 获取下拉信息
    getSelectList() {
      apiGetSelectList().then((res) => {
        const { category, source, labels } = res.data
        this.categoryList = category
        this.labels = labels
        this.sourceList = source
        this.searchFormArr.find((item) => {
          return item.field === 'first_cate'
        }).option = category.map((item) => {
          return {
            id: item.value,
            text: item.key,
          }
        })
        const sourceFormItem = this.searchFormArr.find((item) => {
          return item.field === 'source_id'
        })
        for (let key in source) {
          sourceFormItem.option.push({
            id: key,
            text: source[key],
          })
        }
        const stsFormItem = this.searchFormArr.find((item) => {
          return item.field === 'power_sts'
        })
        stsFormItem.option = this.stsList
        this.getDataList()
      })
    },
    // 获取数据列表
    getDataList() {
      this.dataListLoading = true
      const info = Object.assign({ pageNumber: this.pageNumber, pageSize: this.pageSize }, this.searchParams)

      const formData = new FormData()
      for (let key in info) {
        formData.set(key, info[key])
      }

      apiGetPostList(formData)
        .then((res) => {
          const { items, total } = res.result
          items.forEach((item) => {
            const FirstCateItem = this.categoryList.find((cate) => {
              return parseInt(cate.value) === parseInt(item.first_cate)
            })
            if (FirstCateItem) {
              const cateItem = FirstCateItem.child.find((cate) => {
                return parseInt(cate.value) === parseInt(item.cate_id)
              })
              if (cateItem) {
                item.cate_id_show = `${FirstCateItem.key} ${cateItem.key}`
              } else {
                item.cate_id_show = ''
              }
            } else {
              item.cate_id_show = ''
            }
            if (parseInt(item.is_fast) === 1) {
              item.is_fast_show = '极速发布'
            } else {
              item.is_fast_show = '处理发布'
            }
            const stsItem = this.stsList.find((sts) => {
              return parseInt(sts.id) === parseInt(item.power_sts)
            })
            if (item.power_sts >= 4) {
              item.power_sts_show = '审核通过'
            } else if (stsItem) {
              item.power_sts_show = stsItem.text
            } else {
              item.power_sts_show = ''
            }
          })
          this.dataList = items
          this.totalPage = total
          this.dataListLoading = false
        })
        .catch((e) => {
          this.dataList = []
          this.totalPage = 0
          this.dataListLoading = false
        })
    },
    handleChange(item, fieldArr) {
      if (item.field === 'first_cate') {
        const cateItem = this.categoryList.find((cate) => {
          return parseInt(cate.value) === parseInt(fieldArr.first_cate)
        })
        const searchFormItem = this.searchFormArr.find((item) => {
          return item.field === 'cate_id'
        })
        this.searchParams.cate_id = ''
        this.$refs.searchuinew.clearFormItem('cate_id')
        if (fieldArr.first_cate) {
          searchFormItem.option = cateItem.child.map((item) => {
            return {
              id: item.value,
              text: item.key,
            }
          })
        } else {
          searchFormItem.option = []
        }
      }
    },
    // 列表查询
    searchParma(e) {
      this.searchFormArr.forEach((item) => {
        if (item.field === 'time') {
          if (e.time && e.time[0] && e.time[1]) {
            this.searchParams.start_time = e.time[0]
            this.searchParams.end_time = e.time[1]
          } else {
            this.searchParams.start_time = ''
            this.searchParams.end_time = ''
          }
        } else {
          if (e[item.field]) {
            this.searchParams[item.field] = e[item.field]
          } else {
            this.searchParams[item.field] = ''
          }
        }
      })
      this.pageNumber = 1
      this.getDataList()
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val
      this.pageNumber = 1
      this.getDataList()
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageNumber = val
      this.getDataList()
    },
    // 审核
    handleExamine(scope) {
      this.currentId = scope.row.id
      this.editMode = 'examine'
      if (parseInt(scope.row.is_fast) === 1) {
        this.showQuickExamine = true
      } else {
        this.showExamine = true
      }
    },
    // 编辑
    handleEdit(scope) {
      this.currentId = scope.row.id
      this.editMode = 'edit'
      if (parseInt(scope.row.is_fast) === 1) {
        this.showQuickExamine = true
      } else {
        this.showExamine = true
      }
    },
    // 删除
    handleDelete(scope) {
      this.$confirm('确认删除数据？').then(() => {
        const info = { id: scope.row.id }
        const formData = new FormData()
        for (let key in info) {
          formData.set(key, info[key])
        }

        apiPostDelete(formData).then(() => {
          this.$message({
            message: '删除成功',
            type: 'success',
          })
          this.pageNumber = 1
          this.getDataList()
        })
      })
    },
    // 更新
    handleRefresh() {
      this.showExamine = false
      this.showQuickExamine = false
      this.getDataList()
    },
  },
}
</script>

<style scoped lang="scss">
.tabs {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 12px;
  .tab {
    line-height: 0.6;
    padding: 0px 12px;
    border: 1px solid #dcdfe6;
    border-left: none;
    cursor: pointer;
    font-size: 14px;
    color: #606266;
    &:hover {
      background: #f5f7fa;
    }
    &:first-child {
      border-left: 1px solid #dcdfe6;
      border-radius: 4px 0 0 4px;
    }
    &:last-child {
      border-radius: 0 4px 4px 0;
    }
    &.active {
      background: #409eef;
      color: #ffffff;
    }
  }
}
</style>
